<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix header">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
          <el-tab-pane label="销售额" name="sale"></el-tab-pane>
          <el-tab-pane label="访问量" name="visit"></el-tab-pane>
        </el-tabs>
        <div class="right-box">
          <div class="span-box">
            <span @click="setDay" style="cursor: pointer;">今日</span>
            <span @click="setWeek" style="cursor: pointer;">本周</span>
            <span @click="setMonth" style="cursor: pointer;">本月</span>
            <span @click="setYear" style="cursor: pointer;">本年</span>
          </div>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="18"><div ref="saleCharts" class="charts"></div></el-col>
          <el-col :span="6">
            <h3>门店{{ title }}排名</h3>
            <ul v-if="title=='销售额'">
              <li  v-for="(item, index) in chartData.orderRank">
                <span class="rindex">0</span>
                <span>{{item.name}}</span>
                <span class="rvalue">{{item.money}}</span>
              </li>
            </ul>
            <ul v-else>
              <li  v-for="(item, index) in chartData.userRank">
                <span class="rindex">0</span>
                <span>{{item.name}}</span>
                <span class="rvalue">{{item.money}}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import dayjs from 'dayjs'
  import {mapState, mapGetters} from 'vuex'
  export default {
    components: {},
    data() {
      return {
        activeName: 'sale',
        date: [

        ],
        myChart: null
      };
    },
    computed: {
      ...mapGetters([
        'chartData'
      ]),
      title(){
        return this.activeName == 'sale'?'销售额' : '访问量'
      },
      ...mapState({
        listState:state => state.home.list
      })
    },
    watch:{
      chartData(newValue, oldValue) {
        this.initSaleChart()
      },
      title(){
        this.myChart.setOption({
          title: {
            text: this.title + '趋势',
          },
          xAxis: [{
            data: this.title==='销售额' ? this.chartData.orderFullYearAxis : this.chartData.userFullYearAxis ,
          }],
          series: [{
            data: this.title==='销售额' ? this.chartData.orderFullYear : this.chartData.userFullYear
          }]
        })
      }
    },
    mounted() {
      this.initSaleChart()
    },
    methods: {
      initSaleChart() {
        this.myChart = echarts.init(this.$refs.saleCharts);
        let option = {
          title: {
            text: this.title + '趋势',
            show: true,
             textStyle:{
               fontWeight: 'bolder',
               size: '20px'
             }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.chartData.orderFullYearAxis,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.chartData.orderFullYear
          }]
        };
        option && this.myChart.setOption(option);
      },
      handleClick() {
        // this.initSaleChart()
      },
      //今天
      setDay(){
        let day = dayjs().format('YYYY-MM-DD')
        this.date = [day, day]
      },
      setWeek(){
        let start = dayjs().day(1).format('YYYY-MM-DD')
        let end = dayjs().day(7).format('YYYY-MM-DD')
        this.date = [start, end]
      },
      setMonth(){
        let start = dayjs().startOf('month').format('YYYY-MM-DD')
        let end = dayjs().endOf('month').format('YYYY-MM-DD')
        this.date = [start, end]
      },
      setYear(){
        let start = dayjs().startOf('year').format('YYYY-MM-DD')
        let end = dayjs().endOf('year').format('YYYY-MM-DD')
        this.date = [start, end]
      }
    },
  }
</script>
<style lang="less" scoped>
.header {
  position: relative;
  display: flex;
  justify-content: space-between;

  .tab {
    width: 100%;
  }

  .right-box {
    height: 30px;
    line-height: 30px;
    right: 0px;
    position: absolute;
    display: flex;

    .span-box {
      display: flex;
    }

    span {
      margin-right: 10px;
    }
  }
  .date {
    width: 200px;
  }
}
.charts {
  width: 100%;
  height: 300px;
}
ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0;
  li {
    height: 40px;
    .rindex {
      width: 20px;
      line-height: 20px;
      height: 20px;
      font-size: 12px;
      background-color: #000000;
      color: white;
      text-align: center;
      float: left;
      border-radius: 50%;
      margin-right: 20px;
    }
    .rvalue {
      float: right;
    }
    span:nth-child(2) {
      margin-left: 20px;
    }
  }
}
</style>
